<template>
	<view class="upload-content">
		<MyNav bg-color="#000"></MyNav>
		<view v-if="picture" class="tuya-wrap">
			<yl-graffiti
				ref="graffiti"
				:lineWidth="5"
				:bgImage="picture"
				:shape="shape"
				:width="screenWidth"
				:height="canvasHeight"
				:textBottomTip="textBottomTip"
				@stepChanged="stepChanged"
			>
			</yl-graffiti>
			<view class="tuya-bottomwrap">
				<view v-if="drawType === 1" class="line-type-wrap">
					<view :class="['line-style-item', lineStyle === 1 ? 'active-style' : '']" @click="handleChaneLineStyle(1)">
						<image class="line-style-icon" :src="curveIcon" mode="aspectFill"> </image>
					</view>
					<view :class="['line-style-item', lineStyle === 2 ? 'active-style' : '']" @click="handleChaneLineStyle(2)">
						<image class="line-style-icon" :src="circleIcon" mode="aspectFill"> </image>
					</view>					
					<view :class="['line-style-item', lineStyle === 3 ? 'active-style' : '']" @click="handleChaneLineStyle(3)">
						<view class="arrow-icon">
						 <u-icon name="arrow-upward" color="#fff" size="18"></u-icon>							
						</view>
					</view>
				</view>
				<view class="btn-leftwrap">
					<view class="line-btn" :class="{ 'active-drawtype': drawType === 1 }" @click="changeDrawType(1)">
						<image v-if="drawType === 1" class="typebtnicon" :src="lineAcriveIcon" mode="aspectFill"> </image>
						<image v-else class="typebtnicon" :src="lineIcon" mode="aspectFill"> </image>
						<view>画笔</view>
					</view>
<!-- 					<view class="line-btn" :class="{ 'active-drawtype': drawType === 2 }" @click="changeDrawType(2)">
						<image v-if="drawType === 2" class="typebtnicon" :src="textActiveIcon" mode="aspectFill"> </image>
						<image v-else class="typebtnicon" :src="textIcon" mode="aspectFill"> </image>
						<view>文字</view>
					</view> -->
				</view>
				<view class="repeal-btn" @click="selectWritingOption(3)"> 撤销 </view>
				<view class="confirm-btn" @click="savePicture"> 完成 </view>
			</view>
		</view>
	</view>
</template>
<script>
import MyNav from '../components/my-navbar/my-navbar.vue';
import { uploadFile } from '@/api/common.js';
import curveIcon from '@/subpak_survey/images/curve-style-icon.png';
import circleIcon from '@/subpak_survey/images/circle-style-icon.png';
import lineIcon from '@/subpak_survey/images/line-tuya-icon.png';
import lineAcriveIcon from '@/subpak_survey/images/line-active-tuya-icon.png';
import textIcon from '@/subpak_survey/images/text-tuya-icon.png';
import textActiveIcon from '@/subpak_survey/images/text-active-tuya-icon.png';
export default {
	name: 'Tuya',
	components: {
		MyNav
	},
	data() {
		return {
			circleIcon,
			curveIcon,
			lineIcon,
			lineAcriveIcon,
			textIcon,
			textActiveIcon,
			list: [],
			quesInfo: null,
			textBottomTip: '',
			picture: '',
			stepInfo: {
				// 用来控制撤销和重做
				curStep: -1,
				len: 0,
			},
			drawType: '',
			lineStyle: 2, // 1曲线，2画圆
			aspectRatio: 1, // 上传图片横纵比
			screenWidth: 400,
			screenHeight: 400,
		};
	},
	computed: {
		shape() {
			let shape = 'curve';
			const lineStyle = this.lineStyle;
			if (lineStyle === 1) shape = 'curve';
			if (lineStyle === 2) shape = 'hollow-circle';
			// if (lineStyle === 3) shape = 'line';
			if (lineStyle === 3) shape = 'line-arrow';
			return shape;
		},
		canvasHeight() {
			const screenHeight = this.screenHeight * 0.62;
			const screenWidth = this.screenWidth;
			const aspectRatio = this.aspectRatio;
			return Math.min(screenHeight, screenWidth / aspectRatio);
		},
		canvasWidth() {
			const screenHeight = this.screenHeight * 0.62;
			const screenWidth = this.screenWidth;
			const aspectRatio = this.aspectRatio;
			return Math.min(screenWidth, screenHeight * aspectRatio);
		},
	},
	onLoad(option) {
		const eventChannel = this.getOpenerEventChannel();
		this.eventChannel = eventChannel;
		eventChannel.on('showTuya', (quesInfo) => {
			console.log(quesInfo);
			this.quesInfo = quesInfo;
			this.textBottomTip = quesInfo.quesDesc;
			if (quesInfo.picDataList.length) {
				this.picture = quesInfo.picDataList[0].url;
			} else {
				this.handleSelectImg();
			}
		});
	},
	onUnload() {
		this.eventChannel.off('showTuya');
	},
	created() {
		this.getWindowInfo();
	},
	methods: {
		getWindowInfo() {
			const { screenWidth, screenHeight } = uni.getWindowInfo();
			this.screenWidth = screenWidth;
			this.screenHeight = screenHeight;
		},
		handleSelectImg() {
			uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera'],
				sizeType: 'compressed ',
				success: async (res) => {
					this.$emit('pageoverflow', true);
					const imgList = [];
					const tempFilePaths = res.tempFilePaths;
					uni.getImageInfo({
						src: tempFilePaths[0],
						success: (res) => {
							const { height, width } = res;
							this.aspectRatio = width / height;
							this.picture = tempFilePaths[0];
						},
					});
				},
			});
		},
		handleClearImg(j) {
			this.list.splice(j, 1);
			this.$emit('input', [...this.list]);
		},
		stepChanged(e) {
			this.stepInfo = e;
		},
		selectWritingOption(index) {
			switch (index) {
				case 0:
				case 1:
				case 2:
					this.optIndex = index;
					break;
				case 3:
					this.$refs.graffiti.repeal();
					break;
				case 4:
					this.$refs.graffiti.redo();
					break;
				case 5:
					this.$refs.graffiti.clearBoard();
					break;
				default:
					break;
			}
		},
		changeDrawType(drawType) {
			this.drawType = drawType;
		},
		handleChaneLineStyle(lineStyle) {
			this.lineStyle = lineStyle;
		},
		async savePicture() {
			try {
				uni.showLoading({
					title: '图片处理中...'
				});
				const editedPath = await this.$refs.graffiti.saveCanvas();
				const newResLoaded = await uploadFile(editedPath);
				const editedPic = {
					url: newResLoaded.picUrl,
					name: newResLoaded.picName,
				};
				uni.hideLoading()
				this.$set(this.list, this.tuyaPicIndex, editedPic);
				this.eventChannel.emit('resetQues', editedPic);
				uni.navigateBack();
			} catch (e) {
				//TODO handle the exception
			}
		},
		//返回
		back() {
			uni.navigateBack({
				delta: 1,
			});
		},
	},
};
</script>
<style scoped lang="scss">
.upload-content {
	box-sizing: border-box;
	height: 100vh;
	padding: 20rpx 0;
	background: #000;
}
.tuya-wrap {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.tuya-bottomwrap {
	position: fixed;
	bottom: -24px;
	background: rgba(0, 0, 0, 0.7);
	z-index: 20;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding: 100rpx 48rpx 40rpx;
	margin-bottom: 40rpx;
	color: #fff;
}

.line-type-wrap {
	position: absolute;
	top: 24rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 40rpx;
	padding: 8rpx;
}

.line-style-item {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 64rpx;
	height: 64rpx;
	margin-right: 16rpx;
	border-radius: 6rpx;
}

.active-style {
	border: 2rpx solid #eeb422;
}

.line-style-icon {
	width: 48rpx;
	height: 48rpx;
}

.btn-leftwrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 28rpx;
}

.typebtnicon {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 6rpx;
	margin-right: 88rpx;
}

.active-drawtype {
	color: #3576f2;
}

.repeal-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120rpx;
	height: 64rpx;
	background: #d3d3d3;
	border-radius: 4rpx;
	font-size: 36rpx;
}

.confirm-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120rpx;
	height: 64rpx;
	background: #3576f2;
	border-radius: 4rpx;
	font-size: 36rpx;
}

.arrow-icon{
	transform: rotate(45edg);
}
</style>
